<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>legend配置项</title>
  <script src="./echarts.js"></script>
  <style lang="css">
    #chart1, #chart2 {
      width: 100%;
      height: 800px;
      border: 1px solid red;
      float: left;
    }
  </style>
</head>
<body>
  <div id="chart1"></div>
  <div id="chart2"></div>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));

    myChart1.setOption({
      legend: { // 图例
        type: 'plain',
        // data: ['昨日销量', '今日销量', '明日销量'], // 这样写也可以
        data: [
          { name: '昨日销量', icon: 'circle', },
          { name: '今日销量' },
          { name: '明日销量' }
        ],
        show: true,
        orient: 'horizontal',
        align: 'left',
        padding: 10,
        itemGap: 15,
        itemWidth: 20,
        itemHeight: 16,
        formatter: 'Legend666 {name}', // 这里就是在字符串里写{name}，相当于es6里的模板字符串
        // formatter (name) {
        //   return name + '显示'
        // },
        selectedMode: 'multiple',
        inactiveColor: '#ccc',
        selected: {
          // 选中'系列1'
          '昨日销量': false,
          // 不选中'系列2'
          '今日销量': true,
          '明日销量': true,
        },
        textStyle: {
          color: 'blue'
        },
        // tooltip写在legend里面不管用
        // tooltip: {
        //   show: true
        // },
        data: [
          '昨日销量',
          { name: '今日销量', icon: 'image://' },
          { name: '明日销量', icon: 'circle', textStyle: { color: 'red' } }
        ],
        backgroundColor: '#ccc'
      },
      // tooltip必须写在与legend同级才行
      tooltip: {
        show: true
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '昨日销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '今日销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '明日销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
      ]
    })
    
    const myChart2 = echarts.init(document.getElementById('chart2'));
    const data = getData()
    myChart2.setOption({
      legend: { // 图例
        type: 'scroll',
        // data: ['昨日销量', '今日销量', '明日销量'], // 这样写也可以
        data: data.legendData,
        selected: data.selected,
        selectedMode: 'multiple',
        scrollDataIndex: 2,
        show: true,
        orient: 'horizontal',
        align: 'left',
        padding: 10,
        itemGap: 15,
        itemWidth: 20,
        itemHeight: 16,
        // formatter (name) {
        //   return name + '显示'
        // },
        inactiveColor: '#ccc',
        textStyle: {
          color: 'blue'
        },
        pageIconColor: 'red',
        pageIconSize: [10, 30]
        // backgroundColor: '#ccc'
      },
      // tooltip必须写在与legend同级才行
      tooltip: {
        show: true
      },
      series: [
        {
          name: '姓名',
          type: 'pie',
          data: data.seriesData
        }
      ]
    })

    function getData () {
      let nameList = [
        '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
      ];
      let legendData = []; // 图例数据 ['和穆', '屈项', '梁祁']
      let selected = {};  // 选中的数据 {'和穆': true, '屈项': false, '梁祁': false}
      let seriesData = []; // 系列数据 [{ name: '和穆', value: 20298 }]

      // 随机打乱数组
      nameList.sort(() => Math.random() - 0.5)
      // 取50个
      for (let i = 0; i < 50; i++) {
        const makeUpName = nameList[0] + nameList[0 + 1]
        legendData.push(makeUpName)
        seriesData.push({
          name: makeUpName,
          value: Math.round(Math.random() * 100000)
        })
        selected[makeUpName] = i < 6
        // 删除已使用的2个数据
        nameList.shift()
        nameList.shift()
      }
      console.log('legendData', legendData)
      console.log('selected', selected)
      console.log('seriesData', seriesData)
      return {
        legendData,
        selected,
        seriesData
      }
    }
  </script>
</body>
</html>